<template>


  
  <div>
    <!-- <audio src="static\3196596439.mp3" autoplay="autoplay" preload="auto" controls="small controls"></audio>
     -->
    <div class="bjimg">

    </div>
   

   <div>
      
       <h1 align="left"  style="color:gold;font-weight:bold;font-size:50px"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/pict.jpg" style="max-width: 200px;height: 100px;"> 山东师范大学信息科学与工程学院实验室管理系统</h1>

       <h1 align="center"  style="color:white;font-weight:bold;font-size:70px">SDNU  LIMS </h1>
   </div>

     <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(item,i) in arr" :key="i">
      <h3 class="max">{{ item.content }}</h3>
    </el-carousel-item>
  </el-carousel>


    <div class="box1">

        <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
            <img :src="item.imageUrl" :alt="item.title" height="700px">
            
        </swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
    </div>

    <br/><br/><br/><br/><br/>
   
<div class="block">
  <el-timeline>
    <el-timeline-item timestamp="2021/9/15" placement="top">
      <el-card>
        <h4 style="blue">实验室管理系统在人工智能实验室实际场景中的应用</h4>
        <p>Application of the actual scene in Artificial Intelligence - Lab</p>
      </el-card>
    </el-timeline-item>
    </el-timeline>
    </div>
<el-tabs type="border-card">
  <el-tab-pane label="扫描机器人箱上二维码"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/111.png" style="max-width:1000px;height: 600px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/113.png" style="max-width:1000px;height: 600px;"></el-tab-pane>
  <el-tab-pane label="填写个人信息"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/3.jfif" style="max-width: 1000px;height: 600px;"></el-tab-pane>
  <el-tab-pane label="使用对应设备"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/115.png" style="max-width: 1000px;height: 600px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/22.png" style="max-width: 1000px;height: 600px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/114.png" style="max-width: 1000px;height: 600px;"></el-tab-pane>
  <el-tab-pane label="实验室规章制度"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/p1.png" style="max-width: 1000px;height: 475px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/p2.png" style="max-width: 1000px;height: 475px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/p3.png" style="max-width: 1000px;height: 475px;"><img src="https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/p4.png" style="max-width: 1000px;height: 475px;"></el-tab-pane>
</el-tabs>
    <div class="box2">
        <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in labList" :key="index">
            <img :src="item.imageUrl" :alt="item.title" height="600px">
        </swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
    </div>
<audio src="static\3196596439.mp3" autoplay="autoplay" preload="auto" controls="small controls" loop="-1"></audio>
 
  </div>

</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    component:{
        Swiper, SwiperSlide 
    },
  data () {
    

    return {
      arr: [
      {content:"实验室信息管理系统（Laboratory Information Management System 英文缩写LIMS）是以数据库为核心的信息化技术与实验室管理需求相结合的信息化管理系统。实验室管理的对象是与实验室有关的人、事、物、资料、计量认证、经费等，因此实验室信息管理系统主要包括：实验室人员管理、质量管理、仪器设备与试剂管理、环境管理、安全管理、信息管理以及实验室设置模式与管理体制、管理机构与职能、建设与规划等。"},
      { content :"实验室管理系统能实现的优点（merit）：1. 降低实验室运行成本，2. 提升质量检测管理工作水平，3. 高信息资料利用效率，确保信息管理的安全性，4. 高的质量数据共享与传递，5.提高检测数据公正性，6. 提高检测数据的科学采集和自动化管理水平，7. 科学规范检测工作流程"},
      { content :"在人工智能实验室（ Artificial Intelligence - Lab）里的实现功能：人工智能实验室内的设备昂贵，智能小车容易出现故障，通过实验室管理系统，可以很好的找到负责人员，同时可以及时对出现故障的设备进行保修，提高昂贵设备的安全性和利用率，扫码使用和归还成为一个安全保障。" },
      {  content :"面向所有实验室实现功能（function）：实验室管理系统在管理人员（Personnel Management）方面具有很好的可实施性，对借用设备和工位的人员进行记录，便于对实验室人员进行系统的管理,对设备扫码使用，扫码归还，成为一个便于执行的规章制度，将数据存进系统，方便之后的查看与管理" }
    ],
      swiperOption: {
        
        loop: true,//循环
        //设定初始化时slide的索引
        initialSlide: 0,
        
        //自动播放
        
        autoplay: {
        
        delay:1500,
        
        stopOnLastSlide: false,
        
        disableOnInteraction: false
        },

        //滑动速度
        speed: 800,

        //滑动方向 
        direction: "horizontal", 

        //小手掌抓取滑动
        grabCursor: true,

        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }

      },
      bannerList:[
        {imageUrl:'static/111.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/%E4%BA%BA%E5%91%98.png',
         title:'ceshi'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/%E8%AE%BE%E5%A4%87.png'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/%E9%83%A8%E9%97%A8%E7%AE%A1%E7%90%86.png'},
      
      ],
          labList:[
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/116.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/118.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/120.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/119.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/100.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/101.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/102.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/103.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/104.jpg'},
        {imageUrl:'https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/105.jpg'}
      ]
    }
  },

  methods:{


    
  }
}
</script>

<style>
.bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 1000px;
      z-index: -10;
      zoom: 1;
      background-image: url(https://labms-sdnu.oss-cn-beijing.aliyuncs.com/front/image/114.gif);
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
    }

   .p{
     margin-right: 2000px;
   }
       .el-carousel__item h3 {
    color:	#FFFFF0;
    font-size: 14px;
    opacity: 1.5;
    line-height:50px;
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","方正舒体",Arial,sans-serif;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color:	#4A708B;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color:		#00688B;
  }
</style>